<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#myCanvas{
			background: #CCC;
			margin: 100px auto 0;
			display: block;
		}
		div{
			float: left;
		}
		div button{
			display: block;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<div><button onclick="chooseChess(3);">三子棋</button><button onclick="chooseChess(5);">五子棋</button></div>
	<canvas id="myCanvas" width="600" height="400" onmousemove="mouseMove(event,this);" onclick='luoZi();'>你的浏览器不支持canvas</canvas>

	<script>
	var canvas=document.getElementById('myCanvas');
	var ctx=canvas.getContext("2d");
	var posX;
    var posY;
    var flag;
    var type=3;//选择棋的种类
    var widthHight=100;//棋盘每个格子的宽高
    var arr=new Array();
    
	initial();
function chooseChess (n) {
	type=n;
	widthHight=300/n;
	console.log(widthHight);
	initial();
}
function initial () {
	//定义数组
	arr.length=0;
    for (var i = 0; i <type; i++) {
    	arr[i]=new Array();
    	for (var j = 0; j < type; j++) {
    		arr[i][j]=0;
    	};
    };

    flag="black";
	ctx.fillStyle = "#DDD";
    ctx.fillRect(0,0,canvas.width, canvas.height);

    for (var i = 0; i <= type; i++) {
    	//画棋盘横线
    	ctx.beginPath();
		ctx.strokeStyle = "black";
		ctx.moveTo(150,50+widthHight*i);
		ctx.lineTo(450,50+widthHight*i);
		ctx.stroke();

    	//画棋盘竖线
		ctx.beginPath();
		ctx.strokeStyle = "black";
		ctx.moveTo(150+widthHight*i,50);
		ctx.lineTo(150+widthHight*i,350);
		ctx.stroke();
    };
}
	


	function mouseMove(e,obj) {
		posX=e.clientX-obj.offsetLeft;
		posY=e.clientY-obj.offsetTop;
		// console.log(posX,posY);
	}

	function luoZi(){
		
		console.log(posX,posY);
		if ((posX-150)%widthHight&&(posY-50)%widthHight) {//不点在边框上
			var x=Math.floor((posX-150)/widthHight)+1;
			var y=Math.floor((posY-50)/widthHight)+1;
			console.log(x,y);
			if (arr[y-1][x-1]!=0) {
				return false;
			};
			if (x>=1&&x<(type+1)&&y>=1&&y<(type+1)) {
				if (flag=="black") {
					ctx.beginPath();
					ctx.fillStyle="black";
					ctx.arc(widthHight*x-widthHight/2+150, widthHight*y-widthHight/2+50, widthHight*0.3, 0, Math.PI*2, true); 
					ctx.fill();
					flag="red";
					arr[y-1][x-1]=1;
					ctx.closePath();
				} else{
					ctx.beginPath();
					ctx.fillStyle="red";
					ctx.arc(widthHight*x-widthHight/2+150, widthHight*y-widthHight/2+50, widthHight*0.3, 0, Math.PI*2, true); 
					ctx.fill();
					flag="black";
					arr[y-1][x-1]=2;
					ctx.closePath();
				};
			};
		} 
		console.log(arr);
		isWin(arr,type);
	}
	function isWin (arr,n) {
		var m=1;
		for (var i = 0; i < arr.length; i++) {
			for (var j = 0; j < arr[i].length; j++) {
				if(arr[i][j]==0){continue;} 

				//判断右侧是否相等
				for (var k = j+1; k < n; k++) {
					if (arr[i][j]==arr[i][k]) {
						m++;
					}else{
						break;
					};
				};
				if (m>=n) {
					if (arr[i][j]==1) {
						// console.log("横向比："+i,j);
						alert("黑方胜！")
						playAgain();
						return true;
					} else{
						alert("红方胜！")
						playAgain();
						return true;
					};
				}else{
					m=1;
				}

				//判断右下侧是否相等
				for (var k = 1; k < n; k++) {
					if ((i+k<n)&&(j+k<n)&&(arr[i][j]==arr[i+k][j+k])) {
						m++;
					}else{
						break;
					};
				};
				if (m>=n) {
					if (arr[i][j]==1) {
						// console.log("横向比："+i,j);
						alert("黑方胜！")
						playAgain();
						return true;
					} else{
						alert("红方胜！")
						playAgain();
						return true;
					};
				}else{
					m=1;
				}

				//判断下侧是否相等
				for (var k = i+1; k < n; k++) {
					if (arr[i][j]==arr[k][j]) {
						m++;
					}else{
						break;
					};
				};
				if (m>=n) {
					if (arr[i][j]==1) {
						// console.log("横向比："+i,j);
						alert("黑方胜！")
						playAgain();
						return true;
					} else{
						alert("红方胜！")
						playAgain();
						return true;
					};
				}else{
					m=1;
				}

				//判断左下侧是否相等
				for (var k = 1; k < n; k++) {
					if ((i+k<n)&&(j-k>=0)&&(arr[i][j]==arr[i+k][j-k])) {
						m++;
					}else{
						break;
					};
				};
				if (m>=n) {
					if (arr[i][j]==1) {
						// console.log("横向比："+i,j);
						alert("黑方胜！")
						playAgain();
						return true;
					} else{
						alert("红方胜！")
						playAgain();
						return true;
					};
				}else{
					m=1;
				}

			};
		};

		

		if(hasFull(arr)){
			alert("双方平局！")
			playAgain();
			return true;
		}
	}
//判断二维数组是否有空值
	function hasFull(arr){
		for (var i = 0; i < arr.length; i++) {
			var flag=arr[i].every(function(item,index,arr) {
				return item!=0;
			});
			if (flag==false) {
				break;
			};
		};
		return flag;
	}
//是否重玩
function playAgain() {
		if (confirm("游戏结束，是否重玩？")) {
			initial();
		};
	}	

	// ctx.arc(posX, posY, 20, 0, Math.PI*2, true); 
	</script>
</body>
</html>